<template>


    <a-modal :title="title" :width="1024" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel" :footer="false"
    >

        <a-list :grid="{ gutter:8, column: 4 }"
                :loading="ListLoading"
                :pagination="pagination"
                :data-source="dataSource">


            <a-list-item slot="renderItem" slot-scope="item, index">


                <a-card :hoverable="true">
                    <div slot="cover"
                         :title="item.mediaName"
                         :style="{backgroundImage: 'url('+item.mediaUrl+')', height:'150px'}"
                         class="MaterialimgBox">

                    </div>
                    <a-row>
                        <a-col :span="22" class="text-ellipsis" :title="item.mediaName">
                            {{item.mediaName}}
                        </a-col>
                        <a-col :span="2">
                            <a-button shape="circle" icon="check" size="small" @click="onSelect(item)"/>
                        </a-col>
                    </a-row>


                </a-card>


            </a-list-item>
        </a-list>


    </a-modal>

</template>
<script>
    import {getMaterailFileList}  from '../../../../../util/internal.api'
    import {pagination} from "../../public/colums";

    export default {



        data() {
            return {
                loading: false, //按钮Loading
                visible: true, //modal 显示状态
                mediaId: null,
                title: "素材选择器",

                dataSource: [],
                pagination: {

                    ...pagination,
                    pageSize: 8,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getMaterialList();
                    }
                },

                searchData: {mediaType: 'video'}
            };
        },
        methods: {


            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {render: false});
            },


            //完成监听
            onSelect(obj) {

                let mediaObj = {
                    mediaId: obj.mediaId,
                    mediaName: obj.mediaName,
                    mediaUrl: obj.mediaUrl,
                    mediaDescription:obj.mediaDescription


                }

                this.visible = false;
                this.$emit('closeModal', {render: true, data: mediaObj});

            },

            getMaterialList() {
                this.ListLoading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchData); //删除对象中的空值
                getMaterailFileList(this.pagination, searchData).then(res => {
                    this.ListLoading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },


        },

        created() {
            this.getMaterialList();
        }
    };
</script>


